<div class="bs-docs-section" ng-controller="TypeaheadDemoCtrl">

  <div class="page-header">
    <h1 id="typeaheads">Typeaheads <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/typeahead/typeahead.js" target="_blank">typeahead.js</a>
    </h1>
    <code>mgcrea.ngStrap.typeahead</code>
  </div>


  <h2 id="typeaheads-examples">Examples</h2>
  <p>Add quick, dynamic typeahead functionality with any form text input.</p>

  <div class="callout callout-danger">
    <h4>Plugin dependency</h4>
    <p>Selects require the <a href="#tooltips">tooltip module</a> and <a href="//github.com/mgcrea/angular-strap/blob/master/src/helpers/parse-options.js" target="_blank">parseOptions helper</a> module to be loaded.</p>
  </div>

  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="typeahead/docs/typeahead.demo.html" data-content-js-url="typeahead/docs/typeahead.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip></a></h3>
  <pre class="bs-example-scope">$scope.selectedState = "{{selectedState}}";
$scope.states = {{states}};

$scope.selectedIcon = "{{selectedIcon}}";
$scope.icons = "{{icons}}";

$scope.selectedAddress = "{{selectedAddress}}";
</pre>
  <div class="bs-example" style="padding-bottom: 24px;" append-source>
    <form class="form-inline" role="form">
      <div class="form-group">
        <label><i class="fa fa-globe"></i> State</label>
        <input type="text" class="form-control" ng-model="selectedState" bs-options="state for state in states" placeholder="Enter state" bs-typeahead>
      </div>
      <div class="form-group">
        <label>Icon</label>
        <input type="text" class="form-control" ng-model="selectedIcon" data-min-length="0" data-html="1" data-auto-select="true" data-animation="am-flip-x" bs-options="icon as icon.label for icon in icons" placeholder="Enter icon" bs-typeahead>
      </div>
      <hr>
      <!-- Using an async data provider -->
      <div class="form-group">
        <label><i class="fa fa-home"></i> Address <small>(async via maps.googleapis.com)</small></label>
        <input type="text" class="form-control" ng-model="selectedAddress" data-animation="am-flip-x" bs-options="address.formatted_address as address.formatted_address for address in getAddress($viewValue)" placeholder="Enter address" bs-typeahead>
      </div>
    </form>
  </div>


  <h2 id="typeaheads-usage">Usage</h2>
  <p>Append a <code>bs-typeahead</code>attribute to any element to enable the directive.</p>
  <p>Available items are specified using the <code>bs-options</code> attribute. This attribute uses AngularJS <a href="https://docs.angularjs.org/api/ng/directive/ngOptions" target="_blank">ngOptions</a> array data source syntax.</p>
  <div class="callout callout-danger">
    <h4>Breaking Change</h4>
    <p>If you are using AngularStrap prior to version 2.2.0, please use <code>ng-options</code> instead of <code>bs-options</code>.</p>
  </div>
  <div class="callout callout-info">
    <h4>The module exposes a <code>$typeahead</code>service</h4>
    <p>Available for programmatic use (mainly in directives as it requires a DOM element).</p>
    <div class="highlight">
      <pre>
        <code class="javascript" highlight-block>
          var myTypeahead = $typeahead(element, {controller: someModelController});
        </code>
      </pre>
    </div>
  </div>

  <h3>Options</h3>
  <p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <div class="callout callout-info">
    <h4>This module supports exotic placement options!</h4>
    <p>You can position your typeahead in corners (such as <code>bottom-left</code>) or any other combination two.</p>
    <p>Exotic placement options are not part of the Bootstrap's core, to use them you must use <code>bootstrap-additions.css</code> from the <a href="//github.com/mgcrea/bootstrap-additions" target="_blank">BootstrapAdditions</a> project. This project being not yet fully released, meanwhile, you can use the <a href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css" target="_blank">development snapshot</a> compiled for theses docs.</p>
  </div>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 100px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>string</td>
          <td>am-fade</td>
          <td>apply a CSS animation powered by <code>ngAnimate</code></td>
        </tr>
        <tr>
          <td>placement</td>
          <td>string</td>
          <td>'bottom-left'</td>
          <td>
            how to position the typeahead - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left.<br>
            When "auto" is specified, it will dynamically reorient the typeahead. For example, if placement is "auto left", the typeahead will display to the left when possible, otherwise it will display right.
          </td>
        </tr>
        <tr>
          <td>trigger</td>
          <td>string</td>
          <td>'focus'</td>
          <td>how typeahead is triggered - click | hover | focus | manual</td>
        </tr>
        <tr>
          <td>html</td>
          <td>boolean</td>
          <td>false</td>
          <td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
        </tr>
        <tr>
          <td>delay</td>
          <td>number | object</td>
          <td>0</td>
          <td>
            <p>delay showing and hiding the typeahead (ms) - does not apply to manual trigger type</p>
            <p>If a number is supplied, delay is applied to both hide/show</p>
            <p>Object structure is:
              <code>delay: { show: 500, hide: 100 }</code>
            </p>
          </td>
        </tr>
        <tr>
          <td>container</td>
          <td>string | false</td>
          <td>false</td>
          <td>
            <p>Appends the typeahead to a specific element. Example:
              <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the typeahead in the flow of the document near the triggering element -&nbsp;which will prevent the typeahead from floating away from the triggering element during a window resize.</p>
          </td>
        </tr>
        <tr>
          <td>template</td>
          <td>path | id</td>
          <td>'$typeahead'</td>
          <td>
            <p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
          </td>
        </tr>
        <tr>
          <td>limit</td>
          <td>number</td>
          <td>6</td>
          <td>
            <p>The max number of items to display in the dropdown.</p>
          </td>
        </tr>
        <tr>
          <td>minLength</td>
          <td>number</td>
          <td>1</td>
          <td>
            <p>The minimum character length needed before triggering autocomplete suggestions.</p>
          </td>
        </tr>
        <tr>
          <td>autoSelect</td>
          <td>boolean</td>
          <td>false</td>
          <td>
            <p>Whether or not the first match will automatically be selected upon typing.</p>
          </td>
        </tr>
        <tr>
          <td>comparator</td>
          <td>string</td>
          <td>''</td>
          <td>
            <p>The name of the comparator function which is used in determining a match.</p>
          </td>
        </tr>
        <tr>
          <td>id</td>
          <td>string</td>
          <td>''</td>
          <td>
            The typeahead instance id for usage in event handlers.
          </td>
        </tr>
        <tr>
          <td>watchOptions</td>
          <td>boolean</td>
          <td>false</td>
          <td>
            Whether or not the suggestions collection should be watched for changes.
          </td>
        </tr>
        <tr>
          <td>trimValue</td>
          <td>boolean</td>
          <td>true</td>
          <td>
            If provided and set to false, overrides the default behavior of automatically trimming spaces from inputs. (Added in 2.2.4)
          </td>
        </tr>
        <tr>
          <td>onShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the typeahead dropdown is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the typeahead dropdown is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the typeahead dropdown is hidden.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the typeahead dropdown is hidden.</p>
          </td>
        </tr>
        <tr>
          <td>onSelect</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked when an item is selected.</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$typeaheadProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($typeaheadProvider) {
            angular.extend($typeaheadProvider.defaults, {
              animation: 'am-flip-x',
              minLength: 2,
              limit: 8
            });
          })
        </code>
      </pre>
    </div>
  </div>

</div>
